// 创建一个路由器，并暴露出去

// 命名路由
/*
作用：可以简化路由跳转及传参

跳转路由
<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news/detail">跳转</router-link>

<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>
*/

// 第一步：引入createRouter
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
// 引入一个一个可能要呈现组件
import Home from '@/pages/home.vue'
import News from '@/pages/news.vue'
import About from '@/pages/about.vue'

// 第二步：创建路由器
const router = createRouter({
    history: createWebHistory(), //路由器的工作模式
    routes: [
        { name:'zhuye', path: '/home', component: Home },
        { 
            name:'xinwen', 
            path: '/news', 
            component: News,
            children:[
                {
                    name:'xiang',
                    path: 'detail/:id/:title/:content',
                    component: () => import('@/pages/detail.vue')
                }
            ]
        },
        { name:'guanyu', path: '/about', component: About },
    ]
})
// 暴露出去router
export default router